/* 如何询问ai
  这是我现有的按钮样式，我想保留它的 3D 效果，只换主色为 #1890ff，请帮我调好 hover 和 active 状态的配色和阴影。
  <div class="btn-3d-ed4014 basebtn" style="height:36px;width:67.5px;">停止</div>
  .basebtn{
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 8px;
    position: relative;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    outline: none;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
    user-select: none;
    color: #fff;
  }
  .btn-3d-ed4014 {
    background: linear-gradient(to bottom, #f7a39c, #ed4014); 
    box-shadow:
      inset 0 1px 0 #fff,
      0 4px 0 #cc2f11, 
      0 4px 6px rgba(0, 0, 0, 0.2);
  }
  .btn-3d-ed4014:hover {
    background: linear-gradient(to bottom, #fcbdb2, #ec5729);
  }
  .btn-3d-ed4014:active {
    transform: translateY(3px) scale(0.98);
    box-shadow:
      inset 0 1px 0 #d44b1a, 
      0 1px 0 #a42f12,
      0 1px 4px rgba(0, 0, 0, 0.2);
  }
*/
.basebtn{
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 8px;
  position: relative;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  outline: none;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
  user-select: none;
  color: #fff;
}
/*浅灰色*/
.btn-3d-ccc {
  background: linear-gradient(to bottom, #fdfdfd, #ccc);
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #999,
    0 4px 6px rgba(0, 0, 0, 0.2);
}
.btn-3d-ccc:hover {
  background: linear-gradient(to bottom, #ffffff, #cfcfcf);
}
.btn-3d-ccc:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #ccc,
    0 1px 0 #888,
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/*#ed4014*/
.btn-3d-ed4014 {
  background: linear-gradient(to bottom, #f7a39c, #ed4014); /* 使用渐变色 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #cc2f11, /* 使用稍深的阴影 */
    0 4px 6px rgba(0, 0, 0, 0.2);
}
.btn-3d-ed4014:hover {
  background: linear-gradient(to bottom, #fcbdb2, #ec5729); /* 鼠标悬停时使用浅一点的渐变 */
}
.btn-3d-ed4014:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #d44b1a, /* 活跃状态阴影稍深 */
    0 1px 0 #a42f12, /* 更深的阴影效果 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}
/*#1890ff*/
.btn-3d-1890ff {
  background: linear-gradient(to bottom, #8fbfff, #1890ff); /* 渐变色从浅蓝到深蓝 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #1465b3, /* 深色阴影 */
    0 4px 6px rgba(0, 0, 0, 0.2); /* 外部投影 */
}
.btn-3d-1890ff:hover {
  background: linear-gradient(to bottom, #76aaff, #1571cc); /* 鼠标悬停时使用浅蓝渐变 */
}
.btn-3d-1890ff:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #166da3, /* 按下时的内阴影 */
    0 1px 0 #0f5592, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}




/*#1aada7*/
.btn-3d-1aada7 {
  background: linear-gradient(to bottom, #66c7c1, #1aada7); /* 渐变色从浅绿蓝到深绿蓝 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #148c7c, /* 深色阴影 */
    0 4px 6px rgba(0, 0, 0, 0.2); /* 外部投影 */
}
.btn-3d-1aada7:hover {
  background: linear-gradient(to bottom, #4ec2bb, #149e93); /* 鼠标悬停时的渐变 */
}
.btn-3d-1aada7:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #148c7c, /* 按下时的内阴影 */
    0 1px 0 #107a67, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}



/*#6ee1f5*/
.btn-3d-6ee1f5 {
  background: linear-gradient(to bottom, #a0e3f9, #6ee1f5); /* 渐变色从浅蓝到深蓝 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #4faec6, /* 深蓝色阴影 */
    0 4px 6px rgba(0, 0, 0, 0.2); /* 外部投影 */
}
.btn-3d-6ee1f5:hover {
  background: linear-gradient(to bottom, #8cd7f8, #58c8e5); /* 鼠标悬停时的渐变色 */
}
.btn-3d-6ee1f5:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #4faec6, /* 按下时的内阴影 */
    0 1px 0 #358c9b, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}


/* #ec6102 */
.btn-3d-ec6102 {
  background: linear-gradient(to bottom, #ff9f3e, #ec6102); /* 渐变色从浅橙色到深橙色 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #d34900, /* 深橙色阴影 */
    0 4px 6px rgba(0, 0, 0, 0.2); /* 外部投影 */
}
.btn-3d-ec6102:hover {
  background: linear-gradient(to bottom, #ff9f3e, #f47f2c); /* 鼠标悬停时使用稍浅的渐变 */
}
.btn-3d-ec6102:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #e85d0d, /* 按下时的内阴影 */
    0 1px 0 #b64000, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}


/* #2fa800 */
.btn-3d-2fa800 {
  background: linear-gradient(to bottom, #66d96c, #2fa800); /* 渐变色从浅绿色到深绿色 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #258d00, /* 深绿色阴影 */
    0 4px 6px rgba(0, 0, 0, 0.2); /* 外部投影 */
}
.btn-3d-2fa800:hover {
  background: linear-gradient(to bottom, #54d05e, #219400); /* 鼠标悬停时使用稍浅的渐变 */
}
.btn-3d-2fa800:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #2b8600, /* 按下时的内阴影 */
    0 1px 0 #1d6f00, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/* #7a9acb */
.btn-3d-7a9acb {
  background: linear-gradient(to bottom, #b0c9eb, #7a9acb);/* 渐变色从浅绿色到深绿色 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #5e7fad,
    0 4px 6px rgba(0, 0, 0, 0.2);
}
.btn-3d-7a9acb:hover {
  background: linear-gradient(to bottom, #c2d5f2 , #8aaade); /* 鼠标悬停时使用稍浅的渐变 */
}
.btn-3d-7a9acb:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #6d88b8, /* 按下时的内阴影 */
    0 1px 0 #4f6c95, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/* #e86ca8 */
.btn-3d-e86ca8 {
  background: linear-gradient(to bottom, #fca9cc, #e86ca8);/* 渐变色从浅绿色到深绿色 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #c75390,
    0 4px 6px rgba(0, 0, 0, 0.2);
}
.btn-3d-e86ca8:hover {
  background: linear-gradient(to bottom, #fcb7d5 , #ef7fb4); /* 鼠标悬停时使用稍浅的渐变 */
}
.btn-3d-e86ca8:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #d35a95, /* 按下时的内阴影 */
    0 1px 0 #aa4576, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/* #e86ca8 */
.btn-3d-8b572a {
  background: linear-gradient(to bottom, #c49164, #8b572a);/* 渐变色从浅绿色到深绿色 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #6d3f1e,
    0 4px 6px rgba(0, 0, 0, 0.2);
}
.btn-3d-8b572a:hover {
  background: linear-gradient(to bottom, #d09e71 , #9c6231); /* 鼠标悬停时使用稍浅的渐变 */
}
.btn-3d-8b572a:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #7a4822, /* 按下时的内阴影 */
    0 1px 0 #5c3416, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/* #e86ca8 */
.btn-3d-f7cb3b {
  background: linear-gradient(to bottom, #ffe87e, #f7cb3b);
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #d1a82d,
    0 4px 6px rgba(0, 0, 0, 0.2);
}
.btn-3d-f7cb3b:hover {
  background: linear-gradient(to bottom, #fff18c, #fada47); /* 鼠标悬停时使用稍浅的渐变 */
}
.btn-3d-f7cb3b:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #c69b29, /* 按下时的内阴影 */
    0 1px 0 #a87d1f, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/* #e86ca8 */
.btn-3d-3ccfcf {
  background: linear-gradient(to bottom, #7de4e4, #3ccfcf);
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #2aa5a5,
    0 4px 6px rgba(0, 0, 0, 0.2);
}
.btn-3d-3ccfcf:hover {
  background: linear-gradient(to bottom, #92eaea, #50dada); /* 鼠标悬停时使用稍浅的渐变 */
}
.btn-3d-3ccfcf:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #289d9d, /* 按下时的内阴影 */
    0 1px 0 #1c7b7b, /* 更深的外阴影 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}
